<template>
	<view>
		<u-sticky>
			<view class="header" id="header">
				<u-navbar :title="'每日报表'"  bgColor="transparent" :titleStyle="'color: white'"
					:leftIconColor="'white'" placeholder="true" autoBack />
					
				<view class="filter-criteria-box">
					<view class="filter-criteria" @click="showSelectStore()">
						<view v-if="selectMchStoreId == -1">
							全部场地（{{totalMerchantStore}}个）
						</view>
						<view v-else>
							{{selectMchStoreName}}
						</view>
						<u-icon name="arrow-down-fill" color="#FFFFFF" size="12"></u-icon>
					</view>
					<view class="filter-criteria" @click="selectTime()">
						<view>
							{{startDateStr}} ~ {{endDateStr}}
						</view>
						<u-icon name="arrow-down-fill" color="#FFFFFF" size="12"></u-icon>
					</view>
				</view>
			</view>
		</u-sticky>
		<view class="content">
			<view :style="'height:'+(height - tabBarHeight)+'px'">
				<!-- API链接: https://ext.dcloud.net.cn/plugin?id=7511 -->
				<zb-table
					:fit="true"
				    :columns="column"
				    :stripe="true"
				    :border="false"
				    :data="statsStoreList"></zb-table>
			</view>
			
		</view>
		<u-picker :show="selectStoreShow" :closeOnClickOverlay="true" @close="closeSelectStore()"
			@confirm="selectStoreConfirm" @cancel="closeSelectStore()" :columns="merchantStoreVoColumns"
			keyName="storeName"></u-picker>
		<u-calendar :show="showTime" @confirm="confirmTime()" @cancel="cancelTime()" closeOnClickOverlay="true"
			:maxRange="60" 
			@close="closeTime()" :minDate="timesTempMin" :maxDate="timesTempMax" monthNum="13" startText="开始"
			endText="结束" :showSubtitle="false" :defaultDate="defaultDateMultiple" mode="range" :allowSameDay="true">
		</u-calendar>
	</view>
</template>

<script>
	export default {
		props: {
			// 底部导航栏高度
			tabBarHeight: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				selectMchStoreId: -1,
				selectMchStoreName: '',
				//全部场地
				totalMerchantStore: 0,
				
				selectStoreShow: false,
				
				merchantStoreVoColumns: [], // 场地集合
				statsStoreList: [], // 统计集合
				
				showTime: false,
				startTime: null,
				endTime: null,
				startDateStr: '',
				endDateStr: '',
				timePickerType: '',
				datePicker: new Date().getTime(),
				
				timesTempMin: '',
				timesTempMax: '',
				// 
				defaultDateMultiple: [this.$date.dateFormatYMD(new Date(this.$date.getTime().startThisMonth)), 
					this.$date.dateFormatYMD(new Date())],
					
				
				height: 0,
				
				column:[
				  { name: 'dateStr', label: '日期',fixed:true,align:'center'},
				  { name: 'orderCount', label: '订单数',align:'center'},
				  { name: 'quantityOfCoinsSold', label: '售币数量',align:'center'},
				  { name: 'giftConsume', label: '出礼数',align:'center'},
				  { name: 'giftCost', label: '出礼成本',align:'center'},
				  { name: 'turnover', label: '总金额',align:'center'},
				],
				
				isLoading: true
			}
		},
		methods: {
			// 用这个,因为是组件
			Load(){
				this.startTime = new Date(this.$date.getTime().startThisMonth);
				this.endTime = new Date(this.$date.getTime().endThisMonth);
				
				this.startDateStr = this.$date.dateFormatYMD(this.startTime);
				this.endDateStr = this.$date.dateFormatYMD(this.endTime);
				
				this.findStoreList();
				this.findData();
			},
			Ready(){
				this.timesTempMin = Number(new Date().setFullYear((new Date().getFullYear() - 1)))
				this.timesTempMax = Number(this.$date.getEndDate())
				this.getPomHeight();
			},
			PullDownRefresh(){
				this.findStoreList();
				this.findData();
			},
			
			
			closeSelectStore() {
				this.selectStoreShow = false;
			},
			showSelectStore() {
				this.selectStoreShow = true;
			},
			selectStoreConfirm(e) {
				this.selectMchStoreId = e.value[0].id;
				this.selectMchStoreName = e.value[0].storeName
				this.findData();
				this.closeSelectStore();
			},
			findStoreList(){
				this.$api('merchantStore.findMerchantStoreIdByUserId').then(res => {
					if(res.status == 0){
						if(res.data){
							this.totalMerchantStore = res.data.length;
						}
						let merchantStoreColums = [];
						let all = {
							id: -1,
							storeName: '全部场地'
						}
						this.selectMchStoreName = "全部场地";
						merchantStoreColums.push(all);
						this.merchantStoreVoColumns = [];
						this.merchantStoreVoColumns.push([...merchantStoreColums,...res.data]);
					}else{
						this.$helpers.toast("请求数据失败:"+res.msg);
					}
				}).catch(e => {
					console.log(e);
					this.$helpers.toast('场地查询失败，服务器访问失败');
				})
			},
			
			findData(){
				let params = {
					mchStoreId: this.selectMchStoreId,
					startDateStr: this.startDateStr,
					endDateStr: this.endDateStr,
					type: 1
				}
				this.$api('statsStore.findStoreStatsStateList',params).then(res => {
					uni.stopPullDownRefresh();
					if(res.status == 0){
						// zb-table插件的格式化参数有问题会导致出现省略号，所以这里循环一次自己给参数
						res.data.forEach(item => {
							item['dateStr'] = this.$u.timeFormat(Date.parse(item.dateStr),'mm-dd');
							item['giftCost'] = "￥"+item['giftCost'];
							item['turnover'] = "￥"+item['turnover'];
						})
						this.statsStoreList = res.data;
						setTimeout(() => {
							this.isLoading = false;
						},5500)
					}else{ 
						this.$helpers.toast("请求数据失败:"+res.msg);
					}
				}).catch(e => {
					console.log(e);
					this.$helpers.toast('场地查询失败，服务器访问失败');
					uni.stopPullDownRefresh();
				})
			},
			//日历弹框
			selectTime() {
				this.showTime = true;
			},
			//自定义时间
			confirmTime(e) {
				console.log(e);
				this.startDateStr = e[0]
				this.endDateStr = e[e.length - 1]
				this.showTime = false;
				this.findData();
			},
			cancelTime() {
				this.showTime = false;
			},
			closeTime() {
				this.showTime = false;
			},
			
			//计算高度
			getPomHeight() {
				let query = wx.createSelectorQuery().in(this)
				query.select('#header').boundingClientRect()
				query.exec(res => {
					let windowHeight = wx.getSystemInfoSync().windowHeight
					this.height = windowHeight
					for (let i = 0; i < res.length; i++) {
						this.height -= res[i].height;
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: white;
	}
	.header{
		background-color: #6072FF;
		
		.filter-criteria-box {
			display: flex;
			// margin-top: 50rpx;
			// padding: 0 80rpx;
			justify-content: space-between;
			color: #FFFFFF;
			font-size: 26rpx;
			font-weight: 700;
		
			.filter-criteria {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 30rpx 0;
			}
		}
		.table-th-box{
			position: absolute;
			padding: 0 24rpx;
			background-color: white;
			.table-th{
				width: 100%;
				display: table-row;
				.table-item{
					width: 140rpx;
					text-align: center;
					padding: 12px 10px;
					display: table-cell;
					box-sizing: border-box;
					font-size: 14px;
					font-weight: bold;
					color: #909399;
					border-bottom: 1px #ebeef5 solid;
				}
			}
		}
		
	}
	.content{
		background-color: white;
		/deep/ .odd{
			background-color: #F6F9FF !important;
		}
		/deep/ .item-th{
			background-color: rgb(239, 240, 242) !important;
		}
		/deep/ .item-td{
			// width: fit-content !important;
			border-bottom: none !important;
		}
	}
</style>
